﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NWorkFlowReView.aspx.cs" Inherits="OA.aspx.Moa.NWorkFlow.NWorkFlowReView" %>

<html xmlns:vml="urn:schemas-microsoft-com:vml">

<head id="Head1" runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <link href="../../Style/WorkFlowCss/style.css" type="text/css" rel="stylesheet">
    <link href="../../JS/jsplumb/css/style.css" rel="stylesheet" />
    <link href="../../css/main.css" type="text/css" rel="stylesheet" />
    <script src="../../JS/jquery-1.8.2.min.js"></script>
    <script src="../../JS/jsplumb/js/jsplumb.js"></script>

    <script language="javascript" src="../../JS/ShowWorkFlow.js"></script>


    <meta content="yes" name="apple-mobile-web-app-capable" />

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="../../Style/Mobile/css/style.css" rel="stylesheet" media="screen" type="text/css" />

    <title><%=System.Configuration.ConfigurationManager.AppSettings["SYSTitle"]%></title>
    <link href="../../css/main.css" type="text/css" rel="stylesheet" />
</head>
<body leftmargin="2" opmargin="2">
    <form id="form1" runat="server">

        <div id="topbar">
            <div id="leftnav">
                <a href="../Main.aspx">
                    <img alt="home" src="../../Style/Mobile/images/home.png" /></a>
            </div>
            <div id="title">
                娴佺▼鍥?/div>
            </div>


            <div id="canvas">
                <%=LineContent %>
                <%=ContentLable %>
            </div>
            <asp:TextBox ID="FlowNumber" runat="server" Style="display: none"></asp:TextBox>

        </div>
    </form>
</body>
</html>
<script>

    const canvasId = '#canvas';
    let offsetX = 0;
    let offsetY = 0;
    let numberOfElements = 0;
    jsPlumb.importDefaults({
        MaxConnections: 1,
        Endpoint: ['Dot', { radius: 8 }],
        EndpointStyle: { fill: '#8ea6db' },
        EndpointHoverStyle: { fill: '#3d6ede' },
        PaintStyle: { stroke: '#e85050', strokeWidth: 2 },
        HoverPaintStyle: { stroke: '#9e1b1b', strokeWidth: 2 },
        Connector: [
            'Flowchart',
            {
                gap: 0,
                cornerRadius: 5,
                alwaysRespectStubs: true,
                // midpoint: 0,
                // stub: 2,
                // cornerRadius: 2
            },
        ],
        ConnectionOverlays: [
            ['Arrow', {
                location: 1,
                id: 'arrow',
                length: 10,
                width: 14,
                foldback: 0.6,
            }],
        ],
    });

    //连线
    jsPlumb.ready(function () {
        var lines =<%=Lines %>;

        for (var i = 0; i < lines.length; i++) {
            var arry = lines[i].NextNode.split(",");
            for (var j = 0; j < arry.length; j++) {

                connectNodes(lines[i].NodeSerils, arry[j]);
            }

        }
    });
    function connectNodes(source, target) {
        jsPlumb.connect({
            source: source,
            target: target,
            endpoint: ['Dot', { radius: 8 }],
            connector: ['Flowchart'],
            anchor: ['Left', 'Right'],
            paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
        })
    }
    // 画面初始化
    function loadFlowchart(flowChartJson) {

        resetPage();

    }

    function resetPage(points) {
        jsPlumb.empty('canvas');

    }
    $(document).ready(function () {
        // disablePage();
        loadFlowchart();
    });
</script>
